<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form"  :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="流水单号">
              <el-input v-model="form.orderSn" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="form.userName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input v-model="form.userPhone" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="医院名称">
              <el-select v-model="form.hospitalId" filterable placeholder="请选择">
                <el-option
                  v-for="item in hospOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目分类">
              <el-cascader
                v-model="cates"
                placeholder="请选择"
                :options="cateOption"
                change-on-select
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预约类型">
              <el-select v-model="form.projectType" placeholder="请选择">
                <el-option label="普通" value="1" />
                <el-option label="全款" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单数">
              <el-input v-model="form.num" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提交时间">
              <el-date-picker
                v-model="dates"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                :default-time="['00:00:00', '23:59:59']"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="刷卡日期" width="236">
              <el-date-picker
                v-model="time"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报单类型">
              <el-select v-model="form.formType" placeholder="请选择">
                <el-option label="全部" :value="null" />
                <el-option label="美美咖报单" :value="0" />
                <el-option label="传统报单" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="活动名称">
              <el-select v-model="form.salesType" placeholder="请选择">
                <el-option label="全部" :value="null" />
                <el-option :label="item" :value="index"  v-for="(item,index) in plist" :key="index" />
              </el-select>
            </el-form-item>
          
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
              <el-button
                v-if="
                  hasPermission(
                    'AdminBeautyProjectOrderProvider.exportAllBeautyProjectOrderList'
                  )
                "
                plain
                type="primary"
                class="el-icon-download"
                @click="exportfun"
              >导出</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <!-- table列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="单号">
          <template slot-scope="scope">
            <div>预约单号：{{ scope.row.preOrderSn }}</div>
            <div>流水单号：{{ scope.row.orderSn }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="createdAt" label="提交时间" /> -->
        <el-table-column prop="userName" label="客户姓名" />
        <el-table-column prop="userPhone" label="客户手机号" >
            <template slot-scope="scope">
              {{ scope.row.userPhone|phonereg }}
            </template>
        </el-table-column>
        <el-table-column prop="type" label="流水单类型" />
        <el-table-column prop="formTypeValue" label="报单类型" />
        <el-table-column prop="allPrice" label="金额">
          <template slot-scope="scope">
            消费总金额：{{ scope.row.totalPricePay }}
            <br />
            实付扣除杂费：{{ scope.row.allPricePay }}
            <br />
            杂费：{{ scope.row.extraMoney }}
            <br />
            退款奖励：{{ scope.row.refundAllPrice }}
            <br />
          </template>
        </el-table-column>
        <el-table-column prop="payment" label="付款方式">
          <template slot-scope="scope">
            <div v-if="scope.row.type=='全款项目'">
            金币：{{scope.row.goldCoin}}
              <br />
            平台已支付现金：{{scope.row.platformMoney}}
            </div>
            <div v-else>
            线上收款：{{ scope.row.onlineMoney }}
            <br />
            线上收款实付：{{ scope.row.payAccounts }}
            <br />
            现金：{{ scope.row.ownMoney }}
            <br />
            分期：{{scope.row.stageMoney}}
             <br />
            金币：{{scope.row.goldCoin}}
             </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
                    prop="isIncreaseOrder"
                    label="是否升单"
                >
        </el-table-column>-->
        <el-table-column prop="orderTime" label="日期">
          <template slot-scope="scope">
            创建：{{ scope.row.createdAt }}
            <br />
            刷卡：{{ scope.row.orderTime }}
            <br />
          </template>
        </el-table-column>
        <el-table-column prop="hospitalName" label="医院">
          <template slot-scope="scope">
            {{ scope.row.hospitalName }}
            <br />
            {{ scope.row.hospitalAddress }}
            <br />
          </template>
        </el-table-column>
        <el-table-column label="完成项目数">
          <template slot-scope="scope">
            <div
              style="color:#409EFF;cursor:pointer"
              @click="toRoutes('subsidyManageIndex', scope.row.orderSn)"
            >{{ scope.row.doneNum }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="salesTypeValue" label="活动名称" />
        <el-table-column prop="num" label="单数" />
        <el-table-column prop="userRemark" label="备注" />
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <!-- 普通流水单 -->
            <div v-if="scope.row.type == '普通项目'">
              <el-button
                v-if="
                  hasPermission(
                    'AdminBeautyProjectOrderProvider.updateBeautyProjectOrder'
                  )
                "
                type="text"
                size="small"
                @click="
                  toRoutes(
                    'runWaterManageEdit',
                    scope.row.id,
                    scope.row.orderSn
                  )
                "
              >编辑</el-button>
              <el-button
                v-if="
                  hasPermission(
                    'AdminBeautyProjectOrderProvider.getBeautyProjectOrderById'
                  )
                "
                type="text"
                size="small"
                @click="
                  toRoutes(
                    'runWaterManageInfo',
                    scope.row.id,
                    scope.row.orderSn
                  )
                "
              >查看</el-button>
            </div>
            <!-- 全款项目流水单 -->
            <div v-else>
              <el-button
                v-if="
                  hasPermission(
                    'AdminBeautyProjectOrderProvider.updateBeautyProjectOrder'
                  )
                "
                type="text"
                size="small"
                @click="
                  toRoutes(
                    'runWaterManFullEdit',
                    scope.row.id,
                    scope.row.orderSn
                  )
                "
              >编辑</el-button>
              <el-button
                v-if="
                  hasPermission(
                    'AdminBeautyProjectOrderProvider.getBeautyProjectOrderById'
                  )
                "
                type="text"
                size="small"
                @click="
                  toRoutes(
                    'runWaterManFullInfo',
                    scope.row.id,
                    scope.row.orderSn
                  )
                "
              >查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="listForm.pageNum"
            :page-sizes="page_sizes"
            :page-size="listForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// findAllBeautyProjectOrderListDelete
import { hospitalDropDown } from "@/api/doctorManage";
import { findAllBeautyProjectOrderList } from "@/api/runWaterManage";
import { findAllBeautyCategoryList } from "@/api/medicalClassifyList";
import { exportfile, exportfun } from "@/api/commjs/exprot";
import commonFn from "@/utils/common.js"
export default {
  name: "RunWaterManageIndex",
  filters: {
    cardType: function(e) {
      return window.helper.cardType(String(e));
    }
  },
  data() {
    return {
      dates: null,
      tableLoading: true,
      hospOption: [],
      time: "",
      plist:{},
      form: {
        // salesType: 0,
        ispc: 1,
        pageNum: 1,
        pageSize: 10,
        orderSn: "",
        userName: "",
        userPhone: "",
        hospitalId: null,
        projectCateId: null,
        projectType: "",
        timeStart: "",
        timeEnd: "",
        orderTimeStart: ""
      },
      cates: [],
      tableData: [],
      page_sizes: [10, 30, 50, 100],
      page_totals: 60,
      listForm: {
        pageNum: 1,
        pageSize: 10
      },
      cateOption: [
        {
          value: 0,
          label: "医美"
        },
        {
          value: 1,
          label: "口腔管理"
        },
        {
          value: 2,
          label: "健康管理"
        }
      ]
    };
  },
  watch: {
    time() {
      console.log(this.time);
      this.form.orderTimeStart = this.time ? this.time[0] : "";
      this.form.orderTimeEnd = this.time ? this.time[1] : "";
    }
  },
  mounted() {
    this.plist = commonFn.list
  
    this.getList(this.listForm);
    if (this.cateFn("0") != []) {
      this.cateOption[0]["children"] = this.cateFn("0");
    }
    if (this.cateFn("1") != []) {
      this.cateOption[1]["children"] = this.cateFn("1");
    }
    if (this.cateFn("2") != []) {
      this.cateOption[2]["children"] = this.cateFn("2");
    }
    this.getOption();
  },
  methods: {
    // 导出
    async exportfun() {
      let dates = { ...this.form };
      dates.createdBy = this.$store.state.user.name;
      let res = await exportfun(
        "com.mmk.report.api.AdminReportProvider/1.0.0/exportAllBeautyProjectOrderList.html",
        dates,
        "",
        1
      );
      this.$message({
        message: res.data.msg,
        type: "warning"
      });
      // exportfile(
      //   '/com.mmk.reservation.api.AdminBeautyProjectOrderProvider/1.0.0/exportAllBeautyProjectOrderList.html',
      //   this.form
      // )
    },
    // 按钮权限
    hasPermission(e) {
      return window.helper.hasPermission(e);
    },
    // 获取对应option
    getOption() {
      hospitalDropDown().then(res => {
        const resData = res.data.data;
        const newData = [];
        resData.forEach(e => {
          newData.push({
            value: Number(e.id),
            label: e.name
          });
        });
        this.hospOption = newData;
        // this.item()
      });
    },
    // 获取分类
    cateFn(e) {
      const datas = {
        plate: e
      };
      const newArr = [];
      findAllBeautyCategoryList(datas).then(res => {
        // console.log(res)
        const resData = res.data.data.list;
        if (resData != []) {
          resData.forEach((item1, index) => {
            newArr.push({
              value: item1.id,
              label: item1.name
            });
            if (item1.children != null) {
              newArr[index]["children"] = [];
              item1.children.forEach((item2, i) => {
                newArr[index]["children"].push({
                  value: item2.id,
                  label: item2.name
                });
                if (item2.children != null) {
                  newArr[index]["children"][i]["children"] = [];
                  item2.children.forEach(item3 => {
                    newArr[index]["children"][i]["children"].push({
                      value: item3.id,
                      label: item3.name
                    });
                  });
                }
              });
            }
          });
        }
      });
      return newArr;
    },
    // 成功状态弹窗
    succStatus(txt) {
      this.$message({
        message: txt + "成功",
        type: "success"
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.$message.error(txt + "失败");
    },
    // 查询
    searchFn() {
      this.form.num = this.form.num ? this.form.num - 0 : null;
      this.form.pageNum = 1;
      if (this.dates != null) {
        if (this.dates.length) {
          this.form.timeStart = this.dates[0];
          this.form.timeEnd = this.dates[1];
        }
      } else {
        this.form.timeStart = "";
        this.form.timeEnd = "";
      }
      if (this.cates.length > 0) {
        this.form.projectCateId = this.cates[this.cates.length - 1];
      }
      console.log(this.form);
      this.getList(this.form);
    },
    // 列表数据获取
    getList(e) {
      this.tableLoading = true;
      const datas = e;
      findAllBeautyProjectOrderList(datas)
        .then(res => {
          if (!res.data.code) {
            // console.log(res)
            this.tableData = res.data.data.list;
            this.page_totals = res.data.data.count;
          } else {
            this.$message.error(res.data.msg);
          }
          this.tableLoading = false;
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    // 路由跳转
    toRoutes(e, userId, sn) {
      const route = { name: e, query: { userId: userId, sn: sn } };
      // this.$router.push(route)
      const routeUrl = this.$router.resolve(route);
      window.open(routeUrl.href, "_blank");
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList(this.form);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getList(this.form);
    },
    // 删除
    deleteList(e) {
      const datas = { userId: e };
      console.log(datas);
      this.$confirm("删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log(datas);
          findAllBeautyProjectOrderListDelete(datas).then(res => {
            if (!res.data.code) {
              this.succStatus("删除");
              this.getList(this.form);
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style scoped>
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
</style>
